<template>
    <div class="top" style="display: flex;align-items: center;">
        <p class="left" style="width: 8px;height: 25px;background-color: #f6d39c;margin-right: 10px;border-radius: 3px;">
        </p>
        <p style="color: white;font-size: 22px;font-weight: 600;">{{ $t('账户入金') }}</p>
    </div>
    <div class="main" style="width:100%;margin-top:50px;text-align:center">
        <p style="color:white;">{{ $t('可用余额') }} $0</p>
        <p style="color:white;margin-top:20px">{{ $t('货币波动以实际到账为准，便捷，安全，快速') }} </p>
    </div>
    <el-form style="margin-top:30px;margin-left:50px">
        <el-form-item style="margin-top:30px"><span style="color:white;width:200px;text-align:right;">{{ $t('入金金额') }}：</span>
            <el-input style="width:700px" :placeholder="$t('请输入')" v-model="form.money"></el-input><span
                style="color:white;margin-left:10px">{{ $t('美元') }} </span>
            <!--  <p style="margin-left: 200px;color: white;margin-top: 15px;">提示：入金范围：1~100000000</p> -->
        </el-form-item>

        <el-form-item><span style="color:white;width:200px;text-align:right">{{ $t('支付通道') }}：</span>
            <el-select v-model="form.channel_id" :placeholder="$t('请选择')"
                style="width: 700px;height: 30px; background-color: black; color: white; border: none;">
                <el-option @click="getRechargePay" v-for="option in selectOptions" :key="option.value" :label="option.value"
                    :value="option.id" />
            </el-select>
        </el-form-item>
        <div style="margin-left: 200px;color: white;margin-top: 15px;display: flex;">
            <p ref="contentToCopy">{{ addr }}</p>
            <div style=" 
          height: 33px;
          border-radius: 5px;
          background-color: #f6d39c;
          cursor: pointer;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-left: 10px;
          display: inline-block;
           padding-left: 5px;
            padding-right: 5px;
            padding-top: 5px; 
            box-sizing: border-box;
        " @click="copyContent">
                <el-icon style="font-size: 16px; margin-right: 5px;color: black;">
                    <CopyDocument />
                </el-icon>
                <span style="color: black;">{{ $t('复制') }} </span>
            </div>
        </div>


        <el-form-item style="margin-top: 30px;">
            <span style="color: white; width: 200px; text-align: right;">{{ $t('支付凭证') }} ：</span>
            <p
                style="color: white; width: 700px;height: 150px; background-color: black;display: flex;justify-content: center;overflow: hidden;">
                <el-upload action="http://43.139.121.71:1010/api/common/upload" method="post" list-type="picture-card"
                    :auto-upload="true" style="width: 150px;overflow: hidden;" @success="handleSuccess"
                    :default-file-list="defaultFileList" :show-file-list="showImage" @remove="handleRemove">
                    <el-icon style="font-size: 25px; font-weight: 600; margin-top:30px; margin-bottom: 10px; color: white;">
                        <Plus />
                    </el-icon>
                    <p style="color: white;">{{ $t('请上传支付凭证') }}</p>
                    <!--  <template  #file="{ file }" >
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""  />
                        </div>
                    </template> -->
                </el-upload>
            </p>
        </el-form-item>

        <el-form-item style="margin-top:25px"><span style="color:white;width:200px;text-align:right;"></span>
            <p style="width:150px;background-color:#f6d39c;cursor: pointer;border-radius:7px;display:flex;justify-content:center;align-items:center"
                @click="Recharge">
                <el-icon style="margin-right:6px">
                    <Top />
                </el-icon>
                <span style="">{{ $t('入金') }} </span>
            </p>
        </el-form-item>
    </el-form>
</template>
  
<script>
import { HomeFilled, Promotion, Pointer, Edit, Bottom, CopyDocument, Top, Plus } from "@element-plus/icons-vue";
import { ref } from 'vue';
import { accountInApi, rechargeInApi, getRechargePayApi } from "@/api/index";
export default {
    name: 'DashBoard',
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            form: {
                channel_id: '',
                pay_image: '',
                money: '',
                payment_id: ''
            },
            addr: '',
            showImage: false,
            defaultFileList: [],
            selectOptions: [], // 用于存储从后端请求的选项数据
        };
    },
    methods: {
        copyContent() {
            const contentToCopy = this.$refs.contentToCopy; // 获取要复制的内容的 DOM 元素
            const range = document.createRange();
            range.selectNode(contentToCopy);

            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(range);

            try {
                // 复制到剪贴板
                document.execCommand('copy');
                this.$message.success(this.$t('复制成功'));
            } catch (e) {
                console.error('复制失败:', e);
                this.$message.error(this.$t('复制失败，请手动复制'));
            }

            selection.removeAllRanges(); // 清除选中状态
        },

        /* 获取充值网络 */
        getAccount() {
            const token = localStorage.getItem('token')
            accountInApi(token).then(res => {
                this.selectOptions = res.data
            })
        },

        handleSuccess(response, file, fileList) {
            if (response.code == 1) {
                // response 包含了接口返回的数据
                this.$message.success(response.msg)
                console.log('上传成功，接口返回的数据：', response);
                // 可以根据需要处理接口返回的数据
                this.form.pay_image_url = response.data.fullurl
                this.form.pay_image = response.data.url
                this.defaultFileList = [];
                setTimeout(() => {
                    this.showImage = true;
                }, 1000);
            } else {
                alert(response.msg)
            }
        },
        handleRemove(file, fileList) {
            this.form.pay_image_url = '';
            this.showImage = false;
            this.defaultFileList = fileList;
        },
        /* 充值 */
        Recharge() {
            const token = localStorage.getItem('token')
            this.form.token = token
            rechargeInApi(this.form).then(res => {
                //this.$message(res.msg)
                if (res.code === 1) {
                    this.$message.success(res.msg)
                }
                if (res.code === 0) {
                    this.$message.error(res.msg)
                }

                /// window.location.reload(); 
            })
        },
        /* 获取转账通道 */
        getRechargePay() {
            const token = localStorage.getItem('token')
            const params = {
                token: token,
                channel_id: this.form.channel_id
            }
            getRechargePayApi(params).then(res => {
                console.log(res, '转账的接口信息')
                this.form.payment_id = res.data.channel_id
                this.addr = res.data.payid
                console.log(this.addr, '复制地址')
                console.log(this.form.payment_id)
            })
        },
    },
    mounted() {
        this.getAccount()
    },
    components: {}
}
</script>
  
<style lang="scss" scoped>
:deep(.el-progress-bar__outer) {
    background-color: rgba(255, 255, 255, 0.4);
    /* lightgray, but transparent */

}

/* 进度条颜色 我需要的是渐变色 */
:deep(.el-progress-bar__inner) {
    background-color: white;
    //background: linear-gradient(90deg, #FEC015 0%, #FE8B25 100%);
}

.box1:hover {
    cursor: pointer
}

.custom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    //gap: 10px;

    color: white;
}

.topbox {
    width: 100%;
    height: 21px;
    display: flex;
    font-size: 13px;

    // justify-content: space-around;
    .small {
        width: 152px;
        // background-color: pink;
    }

    .small2 {
        width: 152px;
        // background-color: pink;
    }
}

.chart-wrapper {
    width: 100%;
    /* 确保内部图表容器充满el-col */
}

.dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    /*   .github-corner {
      position: absolute;
      top: 0px;
      border: 0;
      right: 0;
    } */

    .chart-wrapper {
        background: #fff;
        padding: 16px 16px 0;
        margin-bottom: 32px;
    }
}

:deep(.el-input__wrapper) {
    background-color: black ! important;
    box-shadow: none;
}

:deep(.el-upload) {
    background-color: black !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}

:deep(.el-input__inner) {
    color: #fff !important;
}
</style>
  